// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

//
//    Button with solid or pictire background
//--------------------------------------
.button(
    @_button-font-family: @button-font-family,              // button font family
    @_button-font-size: @button-font-size,                  // button font size
    @_button-font-weight: @button-font-weight,              // button font weight
    @_button-cursor: @button-cursor,                        // button cursor
    @_button-display: @button-display,                      // button display
    @_button-disabled-opacity: @button-disabled-opacity,    // button disabled opacity
    @_button-line-height: @button-line-height,              // button line height
    @_button-width: @button-width,                          // button width
    @_button-margin: @button-margin,                        // margins of the button
    @_button-padding: @button-padding,                      // paddings of the button
    @_button-color: @button-color,                          // text color of the button
    @_button-background: @button-background,                // background of the button
    @_button-border: @button-border,                        // border of the button
    @_button-color-hover: @button-color-hover,              // text color of the hovered button
    @_button-background-hover: @button-background-hover,    // background of the hovered button
    @_button-border-hover: @button-border-hover,            // border of the hovered button
    @_button-color-active: @button-color-active,            // text color of the active button
    @_button-background-active: @button-background-active,  // background of the active button
    @_button-border-active: @button-border-active,          // border of the active button
    @_button-gradient: @button-gradient,                    // does the button have gradient background
    @_button-gradient-direction: @button-gradient-direction,                    // gradient direction the button
    @_button-gradient-start-color: @button-gradient-start-color,                // gradient background start color
    @_button-gradient-end-color: @button-gradient-end-color,                    // gradient background end color
    @_button-gradient-start-color-hover: @button-gradient-start-color-hover,    // gradient background start color of the hovered button
    @_button-gradient-end-color-hover: @button-gradient-end-color-hover,    // gradient background start color of the hovered button
    @_button-gradient-start-color-active: @button-gradient-start-color-active,  // gradient background start color of the active button
    @_button-gradient-end-color-active: @button-gradient-end-color-active,       // gradient background start color of the active button
    @_button-icon-use: @button-icon-use,
    @_button-font-content: @button-font-content,
    @_button-icon-font: @button-icon-font,
    @_button-icon-font-size: @button-icon-font-size,
    @_button-icon-font-line-height: @button-icon-font-line-height,
    @_button-icon-font-color: @button-icon-font-color,
    @_button-icon-font-color-hover: @button-icon-font-color-hover,
    @_button-icon-font-color-active: @button-icon-font-color-active,
    @_button-icon-font-margin: @button-icon-font-margin,
    @_button-icon-font-vertical-align: @button-icon-font-vertical-align,
    @_button-icon-font-position: @button-icon-font-position,
    @_button-icon-font-text-hide: @button-icon-font-text-hide
) {
    background-image: none; // Reset unusual Firefox-on-Android default style
    .css(background, @_button-background);
    .background-gradient(
        @_button-gradient-start-color,
        @_button-gradient-end-color,
        @_button-gradient-direction,
        @_button-gradient
    );
    .css(padding, @_button-padding);
    .css(width, @_button-width);
    .css(color, @_button-color);
    .css(border, @_button-border);
    .css(cursor, @_button-cursor);
    .css(display, @_button-display);
    .css(font-family, @_button-font-family);
    .font-size(@_button-font-size);
    .css(font-weight, @_button-font-weight);
    .line-height(@_button-line-height);
    //-moz-box-sizing: content-box; // fix Firefox button line-height problem
    .box-sizing();
    .css(margin, @_button-margin);
    vertical-align: middle;
    ._button-icon (
        @_button-icon-use: @_button-icon-use,
        @_icon-font-content: @_button-font-content,
        @_icon-font: @_button-icon-font,
        @_icon-font-size: @_button-icon-font-size,
        @_icon-font-line-height: @_button-icon-font-line-height,
        @_icon-font-color: @_button-icon-font-color,
        @_icon-font-color-hover: @_button-icon-font-color-hover,
        @_icon-font-color-active: @_button-icon-font-color-active,
        @_icon-font-margin: @_button-icon-font-margin,
        @_icon-font-vertical-align: @_button-icon-font-vertical-align,
        @_icon-font-position: @_button-icon-font-position,
        @_icon-font-text-hide: @_button-icon-font-text-hide
    );
    &:focus,
    &:active {
        .css(background, @_button-background-active);
        .background-gradient(
            @_button-gradient-start-color-active,
            @_button-gradient-end-color-active,
            @_button-gradient-direction,
            @_button-gradient
        );
        .css(border, @_button-border-active);
        .tab-focus();
        .css(color, @_button-color-active);
    }
    &:hover {
        .css(background, @_button-background-hover);
        .background-gradient(
            @_button-gradient-start-color-hover,
            @_button-gradient-end-color-hover,
            @_button-gradient-direction,
            @_button-gradient
        );
        .css(border, @_button-border-hover);
        .css(color, @_button-color-hover);
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: default;
        pointer-events: none; // Disabling of clicks
        .css(opacity, @_button-disabled-opacity);
    }
}

//
//    Button size
//--------------------------------------
.button-size(
    @_button-line-height: @button-line-height,
    @_button-padding: @button-padding
){
    .line-height(@_button-line-height);
    .css(padding, @_button-padding);
}

//
//    Large buttons
//--------------------------------------
.button-l(
    @_button-l-font-size: @button-l-font-size,
    @_button-l-height: @button-l-line-height,
    @_button-l-padding: @button-l-padding
) {
    .button-size(
        @_button-line-height: @_button-l-height,
        @_button-padding: @_button-l-padding
    );
    .font-size(@_button-l-font-size);
}

//
//    Small buttons
//--------------------------------------
.button-s(
    @_button-s-font-size: @button-s-font-size,
    @_button-s-height: @button-s-line-height,
    @_button-s-padding: @button-s-padding
) {
    .button-size(
        @_button-line-height: @_button-s-height,
        @_button-padding: @_button-s-padding
    );
    .font-size(@_button-s-font-size);
}

//
//    Link as button
//--------------------------------------
.link-as-button() {
    .css(display, @button-display);
    text-decoration: none;
    &:hover,
    &:active,
    &:focus {
        text-decoration: none;
    }
}

//
//    Button as link
//--------------------------------------
.button-as-link(
    @_link-color: @link-color,
    @_link-color-hover: @link-color-hover,
    @_line-height: @line-height-base,
    @_disabled_opacity: @button-disabled-opacity
) {
    background: none;
    border: 0;
    display: inline;
    .css(line-height, @_line-height);
    margin: 0;
    padding: 0;
    .link();
    &:hover {
        .css(color, @_link-color-hover);
    }
    &:hover,
    &:active,
    &:focus {
        background: none;
        border: 0;
        outline: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        .css(color, @_link-color);
        text-decoration: underline;
        cursor: default;
        pointer-events: none; // Disabling of clicks
        .css(opacity, @_disabled_opacity);
    }
}

//
//    Responsive
//--------------------------------------
.button-responsive() {
    width: 100%;
}

//
//    Button reset
//--------------------------------------
.button-reset() {
    background-image: none; // Reset unusual Firefox-on-Android default style
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    -moz-box-sizing: content-box; // fix Firefox button line-height problem
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    line-height: inherit;
    .css(font-weight, @font-weight-base);
    &:focus,
    &:active {
        .tab-focus();
        background: none;
        border: none;
    }
    &:hover {
        background: none;
        border: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: not-allowed;
        pointer-events: none; // Disabling of clicks
        .css(opacity, @button-disabled-opacity);
    }
}

//
//    Button primary
//--------------------------------------
.button-primary(
    @_button-line-height: @button-primary-line-height,
    @_button-width: @button-primary-width,
    @_button-margin: @button-primary-margin,
    @_button-padding: @button-primary-padding,
    @_button-color: @button-primary-color,
    @_button-background: @button-primary-background,
    @_button-border: @button-primary-border,
    @_button-gradient-start-color: @button-primary-gradient-start-color,
    @_button-gradient-end-color: @button-primary-gradient-end-color,
    @_button-color-hover: @button-primary-color-hover,
    @_button-background-hover: @button-primary-background-hover,
    @_button-border-hover: @button-primary-border-hover,
    @_button-gradient-start-color-hover: @button-primary-gradient-start-color-hover,
    @_button-gradient-end-color-hover: @button-primary-gradient-end-color-hover,
    @_button-color-active: @button-primary-color-active,
    @_button-background-active: @button-primary-background-active,
    @_button-border-active: @button-primary-border-active,
    @_button-gradient-start-color-active: @button-primary-gradient-start-color-active,
    @_button-gradient-end-color-active: @button-primary-gradient-end-color-active,
    @_button-gradient: @button-primary-gradient,
    @_button-gradient-direction: @button-primary-gradient-direction
) {
    .button(
        @_button-line-height: @_button-line-height,
        @_button-width: @_button-width,
        @_button-margin: @_button-margin,
        @_button-padding: @_button-padding,
        @_button-color: @_button-color,
        @_button-background: @_button-background,
        @_button-border: @_button-border,
        @_button-color-hover: @_button-color-hover,
        @_button-background-hover: @_button-background-hover,
        @_button-border-hover: @_button-border-hover,
        @_button-color-active: @_button-color-active,
        @_button-background-active: @_button-background-active,
        @_button-border-active: @_button-border-active,
        @_button-gradient: @_button-gradient,
        @_button-gradient-direction: @_button-gradient-direction,
        @_button-gradient-start-color: @_button-gradient-start-color,
        @_button-gradient-end-color: @_button-gradient-end-color,
        @_button-gradient-start-color-hover: @_button-gradient-start-color-hover,
        @_button-gradient-end-color-hover: @_button-gradient-end-color-hover,
        @_button-gradient-start-color-active: @_button-gradient-start-color-active,
        @_button-gradient-end-color-active: @_button-gradient-end-color-active
     );
}

//
//    Button revert secondary color
//--------------------------------------
.button-revert-secondary-color(
    @_button-color: @button-color,
    @_button-background: @button-background,
    @_button-border: @button-border,

    @_button-color-hover: @button-color-hover,
    @_button-background-hover: @button-background-hover,
    @_button-border-hover: @button-border-hover,

    @_button-color-active: @button-color-active,
    @_button-background-active: @button-background-active,
    @_button-border-active: @button-border-active
) {
    .css(background, @_button-background);
    .css(color, @_button-color);
    .css(border, @_button-border);
    &:focus,
    &:active {
        .css(background, @_button-background-active);
        .css(color, @_button-color-active);
        .css(border, @_button-border-active);
    }
    &:hover {
        .css(background, @_button-background-hover);
        .css(color, @_button-color-hover);
        .css(border, @_button-border-hover);
    }
}

//
//    Button revert secondary size
//--------------------------------------
.button-revert-secondary-size(
    @_button-font-size: @button-font-size,
    @_button-line-height: @button-line-height,
    @_button-padding: @button-padding
) {
    .font-size(@_button-font-size);
    .button-size(
        @_button-line-height: @_button-line-height,
        @_button-padding: @_button-padding
    )
}

//
//    Inner buttons mixins
//--------------------------------------
._button-icon (
    @_button-icon-use: @button-icon-use,
    @_icon-font-content: @button-font-content,
    @_icon-font: @button-icon-font,
    @_icon-font-size: @button-icon-font-size,
    @_icon-font-line-height: @button-icon-font-line-height,
    @_icon-font-color: @button-icon-font-color,
    @_icon-font-color-hover: @button-icon-font-color-hover,
    @_icon-font-color-active: @button-icon-font-color-active,
    @_icon-font-margin: @button-icon-font-margin,
    @_icon-font-vertical-align: @button-icon-font-vertical-align,
    @_icon-font-position: @button-icon-font-position,
    @_icon-font-text-hide: @button-icon-font-text-hide
) when (@_button-icon-use = true) {
    .button-icon (
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
}

.button-icon (
    @_icon-font-content,
    @_icon-font: @button-icon-font,
    @_icon-font-size: @button-icon-font-size,
    @_icon-font-line-height: @button-icon-font-line-height,
    @_icon-font-color: @button-icon-font-color,
    @_icon-font-color-hover: @button-icon-font-color-hover,
    @_icon-font-color-active: @button-icon-font-color-active,
    @_icon-font-margin: @button-icon-font-margin,
    @_icon-font-vertical-align: @button-icon-font-vertical-align,
    @_icon-font-position: @button-icon-font-position,
    @_icon-font-text-hide: @button-icon-font-text-hide
) {
    .icon-font(
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
}
